<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('cp_form')" />
</head>
<body class="white-bg">
	<div class="main-content">
		<form class="form-horizontal" id="form">
			<input id="pageFlag" name="pageFlag" type="hidden" th:value="${cp.pageFlag}" />
			<input id="id" name="id" type="hidden" th:value="${cp.id}" />
			<input id="type" name="type" type="hidden" th:value="${cp.type}" />

			<div class="row">
				<div class="col-sm-6">
					<div class="form-group">
						<label class="col-sm-3 control-label is-required">考评月份：</label>
						<div class="col-sm-6">
							<input name="monthId" id="monthId" th:value="${cp.monthId}" class="form-control" type="text" required />
						</div>
					</div>
				</div>
			</div>
			
			<div class="row">
				<div class="col-sm-6">
					<div class="col-sm-12" style="text-align:center">
						<span th:utext="${tipsOfJq}"></span>
						<hr/>
						<span id="selected1" style="font-weight:bold;"></span>
						<br/>&nbsp;
					</div>
				</div>
				<div class="col-sm-6">
					<div class="col-sm-12" style="text-align:center">
						<span th:utext="${tipsOfKs}"></span>
						<hr/>
						<span id="selected2" style="font-weight:bold;"></span>
						<br/>&nbsp;
					</div>
				</div>
			</div>
			
			<div class="col-sm-6 table-striped">
				<table id="detailTable1">
					<thead><tr>
						<th style="width:30%">监区</th>
						<th style="width:30%">得分</th>
						<th style="width:30%" width="20%">请选择</th>
					</tr></thead>
					<tbody>
						<tr th:each="detail:${cpDetailListOfJq}">
							<td>
								<input type="hidden" th:id="${'cp_detail_id_' + detail.relaId}" th:name="${'cp_detail_id_' + detail.relaId}"
									th:value="${detail.id}" />
								<input type="hidden" th:id="${'cp_detail_deptId_' + detail.relaId}" th:name="${'cp_detail_deptId_' + detail.relaId}"
									th:value="${detail.dept.deptId}" />
								<span th:text="${detail.dept.deptName}"></span>
							</td>
							<td>
								<span th:id="${'cp_detail_score_display_' + detail.relaId}"></span>
								<!-- 
								<textarea th:name="${'cp_detail_remark_' + detail.relaId}" th:id="${'cp_detail_remark_' + detail.relaId}"
									th:text="${detail.remark}"
									rows="1" maxlength="200" class="form-control"></textarea>
								 -->
							</td>
							<td>
								<select th:name="${'cp_detail_score_' + detail.relaId}" th:id="${'cp_detail_score_' + detail.relaId}"
										th:with="dicts=${@dict.getType('rate_cp_score')}"
										class="form-control" th:onchange="calcInfo([[${detail.relaId}]])">
									<!-- 
									<option value="">--请选择--</option>
									 -->
									<option th:each="dict : ${dicts}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"
											th:selected="${detail.score.toString() == dict.dictValue}"></option>
								</select>
								<input type="hidden" th:id="${'cp_detail_ordr_' + detail.relaId}" th:name="${'cp_detail_ordr_' + detail.relaId}"
									th:value="${detail.ordr}" />
							</td>
							<!-- <td style="width:5%">  -->
							<!--  <span th:text="${detail.relaId}"></span>  -->
							<!-- </td>  -->
						</tr>
					</tbody>
				</table>
			</div>
			<div class="col-sm-6 table-striped">
				<table id="detailTable2">
					<thead><tr>
						<th style="width:30%">科室</th>
						<th style="width:30%">得分</th>
						<th style="width:30%" width="20%">请选择</th>
					</tr></thead>
					<tbody>
						<tr th:each="detail:${cpDetailListOfKs}">
							<td style="width:30%">
								<input type="hidden" th:id="${'cp_detail_id_' + detail.relaId}" th:name="${'cp_detail_id_' + detail.relaId}"
									th:value="${detail.id}" />
								<input type="hidden" th:id="${'cp_detail_deptId_' + detail.relaId}" th:name="${'cp_detail_deptId_' + detail.relaId}"
									th:value="${detail.dept.deptId}" />
								<span th:text="${detail.dept.deptName}"></span>
							</td>
							<td style="width:30%">
								<span th:id="${'cp_detail_score_display_' + detail.relaId}"></span>
								<!-- 
								<textarea th:name="${'cp_detail_remark_' + detail.relaId}" th:id="${'cp_detail_remark_' + detail.relaId}"
									th:text="${detail.remark}"
									rows="1" maxlength="200" class="form-control"></textarea>
								 -->
							</td>
							<td style="width:30%">
								<select th:name="${'cp_detail_score_' + detail.relaId}" th:id="${'cp_detail_score_' + detail.relaId}"
										th:with="dicts=${@dict.getType('rate_cp_score')}"
										class="form-control" th:onchange="calcInfo([[${detail.relaId}]])">
									<!-- 
									<option value="">--请选择--</option>
									 -->
									<option th:each="dict : ${dicts}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"
											th:selected="${detail.score.toString() == dict.dictValue}"></option>
								</select>
								<input type="hidden" th:id="${'cp_detail_ordr_' + detail.relaId}" th:name="${'cp_detail_ordr_' + detail.relaId}"
									th:value="${detail.ordr}" />
							</td>
							<!-- <td style="width:5%">  -->
								
								<!--  <span th:text="${detail.relaId}"></span>  -->
							<!-- </td>  -->
						</tr>
					</tbody>
				</table>
			</div>
			<div style="clear:both;"></div>
		</form>
	</div>
	<th:block th:include="include :: footer" />
	<th:block th:include="include :: datetimepicker-css" />
	<th:block th:include="include :: datetimepicker-js" />
	<script>
		var prefix = ctx + "rate/cp";
		var pageFlag = '[[${cp.pageFlag}]]';
		
		$(function() {
			$("#monthId").datetimepicker({
				format: 'yyyy-mm',
				weekStart: 1,
				autoclose: true,
				startView: 3,
				minView: 3
			});
			
			$("#detailTable1").bootstrapTable();
			$("#detailTable1 th").addClass("text-center");
			$("#detailTable1 td").addClass("text-center");
			
			$("#detailTable2").bootstrapTable();
			$("#detailTable2 th").addClass("text-center");
			$("#detailTable2 td").addClass("text-center");
			
			if ("VIEW" == pageFlag) {
				$("#form input[type='text']").prop("disabled", true);
				$("#form textarea").prop("disabled", true);
				$("#form select").prop("disabled", true);
			}
			
			calcInfo();
		});
		
		function calcInfo(id) {
			if (id) {
				setScoreDisplay(id);
			} else {
				$("select[id^=cp_detail_score_]").each(function() {
					var ids = $(this).attr("id").split("_");
					setScoreDisplay(ids[ids.length - 1]);
				});
			}
			
			var l1 = 0;
			var l2 = 0;
			var l3 = 0;
			
			$("#detailTable1 select[id^=cp_detail_score_]").each(function() {
				var text = $(this).find("option:selected").text();
				if (text.indexOf("优") >= 0) {
					l1++;
				} else if (text.indexOf("良") >= 0) {
					l2++;
				} else if (text.indexOf("一般") >= 0) {
					l3++;
				}
			});
			$("#selected1").text("已选择：优"+l1+"个；良"+l2+"个；一般"+l3+"个。");
			
			l1 = 0;
			l2 = 0;
			l3 = 0;
			
			$("#detailTable2 select[id^=cp_detail_score_]").each(function() {
				var text = $(this).find("option:selected").text();
				if (text.indexOf("优") >= 0) {
					l1++;
				} else if (text.indexOf("良") >= 0) {
					l2++;
				} else if (text.indexOf("一般") >= 0) {
					l3++;
				}
			});
			$("#selected2").text("已选择：优"+l1+"个；良"+l2+"个；一般"+l3+"个。");
		}
		function setScoreDisplay(id) {
			$("#cp_detail_score_display_" + id).text($("#cp_detail_score_" + id).find("option:selected").text());
		}
		
		function submitHandler() {
			if (pageFlag == "ADD" || pageFlag == "EDIT") {
				if ($.validate.form()) {
					// check score not null
					var index;
					var invalid = false;
					$("select[id^='cp_detail_score_']").each(function(ind) {
						if (!$(this).val()) {
							// alert($(this).val() + ind);
							invalid = true;
							index = ind;
							return false;
						}
					});
					if (invalid) {
						$.modal.alertWarning("第" + (index + 1) + "行未打分！");
						return false;
					}
					$.modal.confirm("确定保存数据？", function() {
						$.operate.save(prefix + "/save", $('#form').serialize());
					});
				}
			} else {
				var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
				parent.layer.close(index); //再执行关闭
				return true;
			}
		}
	</script>
</body>
</html>
